<template>
    <van-nav-bar :title="route.path === '/recomment' ? '种草推荐' : '我的文章'" left-arrow @click-left="router.back()"
        @click-right="router.push('/add-article')">
        <template #right>
            <van-icon name="add-o" />
        </template>
    </van-nav-bar>
    <div class="content">
        <van-list finished-text="没有更多数据了！ 别划了" :finished="finished" v-model:loading="loading" @load="onLoad"
            :offset="10">
            <van-card class="item" v-for="article in list" :thumb="article.pic_url"
                @click="router.push(`/article-detail?articleId=${article.id}`)">
                <template #title>
                    <p class="title">
                        {{ article.title }}
                    </p>
                </template>
                <template #desc>
                    <p class="detail">{{ article.detail }}</p>
                </template>
                <template #price>
                    <p class="desc">
                        {{ article.desc }}
                    </p>
                </template>
                <template #num>
                    <p>{{ article.created_at }}</p>
                </template>
            </van-card>
        </van-list>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getComments } from "@/api/comment";
import usePageList from '@/views/Hooks/usePageList'
// 获取路由器实例
let router = useRouter();
let route = useRoute();
let { onLoad, loading, finished, list } = usePageList(getComments, {
    limit: 10,
    page: 1,
});
</script>

<style scoped lang="scss">
.content {
    .item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .title {
            font-size: 16px;
            color: black;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .detail {
            margin-top: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgb(105, 105, 105);
        }

        .desc {
            color: rgb(105, 105, 105);
            font-weight: normal;
        }
    }
}
</style>
